<template>
  <div class="commentBox bgWhite">
    <PlInput :cardid="cardid" />
    <div class="commentList" v-if="cardComment">
      <div class="cl-header">小伙伴都在这里吐槽</div>
      <div class="cl-content">
        <div class="cl-item" v-for="item in cardComment" :key="item.id">
          <label class="clitem-img" v-rainbow>
            <!-- <img src="../../assets/images/avatar.png" alt=""> -->
            <!-- {{
              getAge(item.username)
            }} -->
          </label>
          <div class="clitem-right">
            <div class="cr-top">
              <a class="cr-name" target="_blank" :href="item.userurl">{{ item.username }}</a>
              <label class="cr-time" :title="item.createdAt">{{ getTime(item.createdAt) }}</label>
            </div>
            <div class="cr-content">{{ item.commontc }}</div>
            <button class="clitem-reply" :style="item.isSelected == ''?'':'display: none;'" @click="showCommon(item)">回复</button>
            <PlInput :cardid="cardid" v-bind:is="item.isSelected" :lev="item.username" :toid="item.id" :item="item" @commonCan="commonCan(item)" />
          </div>
          <div class="cl-item lev-item" v-for="itemc in item.commonts" :key="itemc.id">
            <label class="clitem-img" v-rainbow>
              <!-- <img src="../../assets/images/avatar.png" alt=""> -->
              <!-- {{
              getAge(item.username)
              }} -->
            </label>
            <div class="clitem-right">
              <div class="cr-top">
                <a class="cr-name" target="_blank" :href="itemc.userurl">{{ itemc.username }}</a>
                <label class="cr-time" :title="itemc.createdAt.replace('T', ' ').split('.00')[0]">{{ getTime(itemc.createdAt) }}</label>
              </div>
              <div class="cr-content"><span style="color:red;" v-if="itemc.toname">{{'@'+itemc.toname+': '}}</span>{{ itemc.commontc }}</div>
              <button class="clitem-reply" :style="itemc.isSelected == ''?'':'display: none;'" @click="showCommon(item)">回复</button>
              <PlInput :cardid="cardid" v-bind:is="itemc.isSelected" :lev="itemc.username" :toid="item.id" @commonCan="commonCan(itemc)" />
            </div>
          </div>
        </div>
        <div v-if="cardComment.length < 1">暂无评论快来评论吧</div>
      </div>
    </div>
    <div v-else class="commont-loading">加载中</div>
  </div>
</template>
<script>
import PlInput from "./PlInput";
import config from "../utils/config";
import { formatDate } from "../utils/util.js";
export default {
  components: { PlInput },
  data() {
    return {
      userName: "",
      userEmail: "",
      userUrl: "",
      userContent: "",
      val1: "",
      val2: "",
      val3: "",
      val4: "",
      cardComment: null,
      showReply: false,
      currentComponent: "",
      hisItem: null,
    };
  },
  props: ["cardid"],
  methods: {
    commonCan(item) {
      item.isSelected = "";
    },
    getTime(val) {
      return formatDate(val);
    },
    // 加载评论
    loadCommont() {
      this.$axios
        .get(config.BASE_URL + "/api/commont/list" + "?cardid=" + this.cardid)
        .then((res) => {
          if (res.data.status == "error") {
          } else {
            if (res.data.c == 1) {
              console.log(res.data.d.rows);
              this.cardComment = res.data.d.rows.map((v) => {
                v.commonts.map((v1) => {
                  return { ...v1, isSelected: "" };
                });
                return { ...v, isSelected: "" };
              });
            } else {
              this.$message(res.data.m);
            }
          }
        });
    },
    getAge(str) {
      return str.substring(0, 1).toUpperCase();
    },
    // 加载验证
    randYz() {
      this.val1 = parseInt(Math.random() * 10);
      this.val2 = parseInt(Math.random() * 10);
      this.val4 = this.val1 + this.val2;
    },
    // 获取浏览器
    sys_userAgent(ua) {
      let browserType = null;
      if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
        browserType = "IE";
      } else if (ua.match(/firefox/) != null) {
        browserType = "firefox";
      } else if (ua.match(/ucbrowser/) != null) {
        browserType = "UCBrowser";
      } else if (ua.match(/opera/) != null || ua.match(/opr/) != null) {
        browserType = "opera";
      } else if (ua.match(/baidubrowser/) != null) {
        browserType = "BaiduBrowser";
      } else if (ua.match(/metasr/) != null) {
        browserType = "sougou";
      } else if (
        ua.match(/tencenttraveler/) != null ||
        ua.match(/qqbrowse/) != null
      ) {
        browserType = "QQBrowser";
      } else if (ua.match(/maxthon/) != null) {
        browserType = "maxthon";
      } else if (ua.match(/chrome/) != null) {
        var is360 = this._mime(
          "type",
          "application/vnd.chromium.remoting-viewer"
        );
        if (is360) {
          browserType = "360";
        } else {
          browserType = "chrome";
        }
      } else if (ua.match(/safari/) != null) {
        browserType = "Safari";
      } else {
        browserType = "others";
      }
      return browserType;
    },
    showCommon(item) {
      this.cardComment.map((v) => {
        v.isSelected = "";
      });
      item.isSelected = "PlInput";
    },
    _mime(option, value) {
      var mimeTypes = navigator.mimeTypes;
      for (var mt in mimeTypes) {
        if (mimeTypes[mt][option] === value) {
          return true;
        }
      }
      return false;
    },

    // 获取系统
    setOsData(userAgent) {
      let osData = [
        {
          name: "Windows 2000",
          group: "windows_server",
          identifier: "Windows NT 5.0",
          version: "5.0",
        },
        {
          name: "Windows XP",
          group: "windows",
          identifier: "Windows NT 5.1",
          version: "5.1",
        },
        {
          name: "Windows 2003",
          group: "windows_server",
          identifier: "Windows NT 5.2",
          version: "5.2",
        },
        {
          name: "Windows Vista",
          group: "windows",
          identifier: "Windows NT 6.0",
          version: "6.0",
        },
        {
          name: "Windows 7",
          group: "windows",
          identifier: "Windows NT 6.1",
          version: "7.0",
        },
        {
          name: "Windows 8",
          group: "windows",
          identifier: "Windows NT 6.2",
          version: "8.0",
        },
        {
          name: "Windows 8.1",
          group: "windows",
          identifier: "Windows NT 6.3",
          version: "8.1",
        },
        {
          name: "Windows 10",
          group: "windows",
          identifier: "Windows NT 10.0",
          version: "10.0",
        },
        {
          name: "Windows 2008",
          group: "windows_server",
          identifier: "Windows NT 6.0; WOW64",
          version: "6.0",
        },
        {
          name: "Windows 2008",
          group: "windows_server",
          identifier: "Windows NT 6.1; WOW64",
          version: "6.1",
        },
        {
          name: "Windows 2012",
          group: "windows_server",
          identifier: "Windows NT 6.3; Win64",
          version: "6.3",
        },
        { name: "Chrome OS", group: "windows", identifier: "CrOS" },
        {
          name: "Mac OS X Capitan",
          group: "mac",
          identifier: "Mac OS X (10([_|.])11([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Yosemite",
          group: "mac",
          identifier: "Mac OS X (10([_|.])10([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Mavericks",
          group: "mac",
          identifier: "Mac OS X (10([_|.])9([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Mountain Lion",
          group: "mac",
          identifier: "Mac OS X (10([_|.])8([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Lion",
          group: "mac",
          identifier: "Mac OS X (10([_|.])7([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Snow Leopard",
          group: "mac",
          identifier: "Mac OS X (10([_|.])6([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Leopard",
          group: "mac",
          identifier: "Mac OS X (10([_|.])5([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Tiger",
          group: "mac",
          identifier: "Mac OS X (10([_|.])4([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Panther",
          group: "mac",
          identifier: "Mac OS X (10([_|.])3([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Jaguar",
          group: "mac",
          identifier: "Mac OS X (10([_|.])2([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Puma",
          group: "mac",
          identifier: "Mac OS X (10([_|.])1([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        {
          name: "Mac OS X Cheetah",
          group: "mac",
          identifier: "Mac OS X (10([_|.])0([0-9_.]*))",
          versionSeparator: "[_|.]",
        },
        { name: "Mac OS", group: "mac", identifier: "Mac OS" },
        {
          name: "Ubuntu",
          group: "linux_server",
          identifier: "Ubuntu",
          versionIdentifier: "Ubuntu/([0-9.]*)",
        },
        {
          name: "CentOs",
          group: "linux_server",
          identifier: "CentOs",
          versionIdentifier: "CentOs/([0-9.]*)",
        },
        { name: "Debian", group: "linux_server", identifier: "Debian" },
        { name: "Gentoo", group: "linux_server", identifier: "Gentoo" },
        { name: "国产系统", group: "linux", identifier: "Linux" },
      ];
      let os = {
        name: "",
        group: "",
      };
      // var userAgent = navigator.userAgent.toLowerCase();
      // Check browser type
      for (let i in osData) {
        if (osData.hasOwnProperty(i)) {
          var osRegExp = new RegExp(osData[i].identifier.toLowerCase());
          var osRegExpResult = osRegExp.exec(userAgent);
          if (osRegExpResult != null) {
            os["name"] = osData[i].name;
            os["group"] = osData[i].group;
            break;
          }
        }
      }
      return os;
    },
  },
  created() {
    this.randYz();
  },
  mounted() {
    this.loadCommont();
  },
};
</script>
<style scoped>
.commentBox {
  padding: 20px;
}
.cth-left {
  padding-left: 1rem;
}
label.cl {
  height: 2rem;
  line-height: 2rem;
  display: inline-block;
  width: 1rem;
  text-align: center;
}
input.cl {
  height: 1.2rem;
  width: 4rem;
  line-height: 1.2rem;
  /* background: rgba(245, 245, 245, 0.71); */
  border: 1px solid #ccc;
}

input.hd-item {
  width: 30%;
  border: 1px solid #ccc;
  margin: 8px 0;
  padding-left: 5px;
  font-size: 15px;
}
.titleNmae {
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  font-weight: 600;
}
img.titleImg {
  height: 30px;
  width: 30px;
  float: left;
  margin-right: 5px;
}
.headerDetail {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  /* width: 80%; */
  margin: 0 auto;
}
textarea.commentText {
  height: 100%;
  width: 100%;
  font-size: 14px;
  letter-spacing: 1px;
  border: none;
  padding: 5px;
  margin: 0;
  /* background-image: url("../../static/img/cbg.png"); */
  background-size: 200px 200px;
  background-position: right;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: block;
}
.ct-header {
  height: 40px;
  /* background: gray; */
  position: relative;
  border-top: 1px solid #ccc;
}
.comment-text {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ccc;
}
/* .ct_submit {
  position: absolute;
  width: 80px;
  height: 30px;
  top: 50%;
  right: 10px;
  border-radius: 2px;
  margin-top: -15px;
  background: #6280e1;
  color: #fff;
  cursor: pointer;
  border: none;
}
.ct_submit:hover {
  background: #6280e1;
} */
.cl-header {
  height: 25px;
  line-height: 25px;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
}
.commont-loading {
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #6280e1;
}
.cl-content {
  text-align: center;
  padding: 10px;
  color: #6280e1;
}
/* 评论样式 */

.cl-item {
  /* border: 1px solid; */
  /* border-radius: 5px; */
  /* margin-bottom: 3rem; */
  position: relative;
  min-height: 3rem;
  margin-top: 1rem;
  /* background: red; */
  /* border-bottom: 1px solid; */
  /* padding-bottom: 1rem; */
}

.clitem-img {
  position: absolute;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  left: 0;
  border-radius: 50%;
  font-size: 1.3rem;
  color: #fff;
  box-sizing: border-box;
  padding: 2px;
  filter: saturate(40%);
}
.clitem-img:hover {
  filter: saturate(120%);
}
.clitem-img img {
  background: #fff;
  border-radius: 50%;
}
.clitem-right {
  position: relative;
  text-align: left;
  margin-left: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3rem;
}
.lev-item {
  margin-left: 3rem;
  border-left: 2px solid rgba(182, 197, 245, 0.37);
}
.lev-item .clitem-img {
  left: 1rem;
}
.lev-item .clitem-right {
  margin-left: 4.2rem;
}
.cr-top {
  height: 1.3rem;
  line-height: 1.3rem;
}
.cr-content {
  color: #333;
  white-space: pre-line;
}
.cr-name {
  font-size: 0.9rem;
  color: #04223a;
  /* display: inline-block; */
  float: left;
  font-weight: bold;
}
.cr-time {
  font-size: 0.8rem;
  color: #8c92a4;
  line-height: 1.3rem;
  height: 1.3rem;
  /* display: inline-block; */
  float: left;
  text-align: left;
  margin-left: 0.6rem;
}
.clitem-ua {
  margin-left: 1rem;
  display: inline-block;
}
.clitem-ua label {
  background: #e8f5ff;
  padding: 0.6rem 1rem;
  border-radius: 5px;
  color: #889fab;
  font-size: 0.75rem;
}
.clitem-reply {
  position: absolute;
  right: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}
.cl-item:hover .clitem-reply {
  opacity: 1;
}
</style>
